<template>
    <div class="gongsi-mes">
    <div class="header">添加仓库</div>
    <el-form
      :model="message"
      :rules="rules"
      ref="message"
      label-width="100px"
      class="messageFrom"
    >
      <el-form-item label="仓库名称:" prop="name">
        <el-input v-model="message.name"></el-input>
      </el-form-item>
      <el-form-item label="仓库类型:" prop="url">
        <el-input v-model="message.url"></el-input>
      </el-form-item>
      <el-form-item label="员工数:" prop="staff">
        <el-input v-model="message.staff"></el-input>
      </el-form-item>
      <el-form-item label="联系电话:" prop="head">
        <el-input v-model="message.head"></el-input>
      </el-form-item>
      <el-form-item label="仓库地址:" prop="number">
        <el-input v-model="message.number"></el-input>
      </el-form-item>
      <el-form-item label="跟车司机:" prop="phone">
        <el-input v-model="message.phone"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('message')"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
    <script>
export default {
  data() {
    return {
      message: {
        name: "",
        url: "",
        staff: "",
        head: "",
        number: "",
        phone: "",
      },
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      text: "",
      rules: {
        name: [
          { required: true, message: "请输入公司名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        url: [
          { required: true, message: "请输入公司地址", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        staff: [
          { required: true, message: "请输入员工人数", trigger: "blur" },
          { min: 1, max: 5, message: "长度在 1 到 5 个字符", trigger: "blur" },
        ],
        head: [
          { required: true, message: "请输入负责人名字", trigger: "blur" },
          { min: 2, max: 4, message: "长度在 2 到 4 个字符", trigger: "blur" },
        ],
        number: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          {
            min: 18,
            max: 18,
            message: "请输入正确的身份证号",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        phone: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "请输入正确的电话号码",
            trigger: "blur",
          },
        ],
        weixin: [
          { required: true, message: "请输入公司名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(message) {
      this.$refs[message].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
  },
};
</script>

<style lang="scss" scoped>
.gongsi-mes {
  border: 2px solid #bebebe;
  border-radius: 5px;

  & .header{
      width:100%;
      height: 60px;
      line-height: 60px;
      padding-left: 30px;
      box-sizing: border-box;
      background-color: #eaeaea;
  }

  & .messageFrom {
    width: 350px;
    margin: 25px auto 0;
    padding: 25px;
  }

  & .upload-demo ::v-deep .el-upload-dragger {
    width: 160px;
    height: 60px;
  }
  & .icon-image {
    margin: 0;
    font-size: 30px;
    line-height: 30px;
  }
  & .tuce-text {
    font-size: 12px;
    color: #606266;
  }
  & .el-upload__text {
    height: 30px;
    width: 160px;
    font-size: 12px;
    text-align: center;
    line-height: 20px;
  }
}
</style>